<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="../include/laypublic.jsp" %>
<!DOCTYPE html>
<html>
<head>
</head>
<title>银行台账</title>
<style type="text/css">
    .layui-form-item {
        margin-bottom: 5px;
        clear: both;
        *zoom: 1;
    }

    .layui-form-label {
        width: 130px;
    }
</style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <!-- 查询区域  -->
        <div id="query-form" class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item" style="margin-bottom: 0px;">
                <div class="layui-inline">
                    <label class="layui-form-label">账户类型</label>
                    <div class="layui-input-inline">
                        <select name="accountType">
                            <option value="">请选择</option>
                            <option value="1">贷款账号</option>
                            <option value="2">监管账号</option>
                            <option value="3">普通账号</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">开户行</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="openBankName" placeholder="请输入开户行名称">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="accountStatus">
                            <option value="">请选择</option>
                            <option value="0">禁用</option>
                            <option value="1">启用</option>
                        </select>
                    </div>
                </div>
                <shiro:hasPermission name="FIA_BANK_INFO_LIST_QUERY">
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="lay-bankInfo-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>查询
                        </button>
                        <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="lay-user-back-reset">
                            <i class="layui-icon layui-icon-fonts-clear  layuiadmin-button-btn"></i>重置
                        </button>
                    </div>
                </shiro:hasPermission>
            </div>
        </div>
        <!-- 按钮区域  -->
        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <shiro:hasPermission name="IMPORT_FIA_BANK_INFO">
                    <button class="layui-btn layuiadmin-btn-admin " data-type="import" onclick="importList();">
                        <i class="layui-icon layui-icon-export layuiadmin-button-btn"></i>导出
                    </button>
                </shiro:hasPermission>
                <shiro:hasPermission name="EXPORT_FIA_BANK_INFO">
                    <button class="layui-btn layuiadmin-btn-admin " data-type="export" onclick="exportList();">
                        <i class="layui-icon layui-icon-export layuiadmin-button-btn"></i>导出
                    </button>
                </shiro:hasPermission>
                <shiro:hasPermission name="ADD_FIA_BANK_INFO">
                    <button class="layui-btn layuiadmin-btn-admin " data-type="add">
                        <i class="layui-icon layui-icon-add-1 layuiadmin-button-btn"></i>新建
                    </button>
                </shiro:hasPermission>
            </div>
            <!-- 数据表单 -->
            <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <table id="lay-bankInfo-create-manage" lay-filter="lay-bankInfo-create-manage"></table>
                    </div>
                </div>
            </div>

            <!-- 新增/编辑窗口 -->
            <div class="layui-form" lay-filter="saveOrEditForm" id="saveOrEditForm" style="padding: 20px 30px 0 0;display:none">
                <input type="hidden" name="id" id="id"/>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">银行名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="bankName" name="bankName" maxlength="50" placeholder="请输入银行名称" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">机构类型</label>
                        <div class="layui-input-inline">
                            <select id="instType" name="instType" lay-verify="required" lay-search>
                                <option value="">请选择</option>
                                <option value="1">商业银行</option>
                                <option value="2">政策性银行</option>
                                <option value="3">当地主流银行</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">开户行名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="openBankName" name="openBankName" maxlength="50" placeholder="请输入开户行名称" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">开户行账号</label>
                        <div class="layui-input-inline">
                            <input type="text" id="accountNo" name="accountNo" maxlength="50" placeholder="请输入开户行账号" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">帐户归属</label>
                        <div class="layui-input-inline">
                            <select id="accountOwner" name="accountOwner" lay-verify="required" lay-search>
                                <option value="">请选择</option>
                                <option value="1">总部</option>
                                <option value="2">区域</option>
                                <option value="3">项目</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">账户类型</label>
                    <div class="layui-input-inline">
                        <select name="accountType" lay-verify="required" lay-search>
                            <option value="">请选择</option>
                            <option value="1">贷款账号</option>
                            <option value="2">监管账号</option>
                            <option value="3">普通账号</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">账户状态</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="accountStatus" value="1" title="启用" checked>
                        <input type="radio" name="accountStatus" value="0" title="禁用">
                    </div>
                </div>
                <div class="layui-form-item layui-hide">
                    <input type="button" lay-submit lay-filter="saveOrEditFormSubmit" id="saveOrEditFormSubmit" value="确认">
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.config({
        base: '${ctx}/resources/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'set', 'transfer', 'laydate'], function () {
        var $ = layui.$
            , form = layui.form
            , table = layui.table
            , element = layui.element
            , laydate = layui.laydate;
        //tab重新渲染宽度
        element.on('tab(component-tabs-brief)', function (obj) {
            $(window).resize();
        });

        // 正则校验
        form.verify({
            //验证汉字
            CHS: [
                /^[\u0391-\uFFE5]+$/
                , '只能输入汉字'
            ],
            //大于0的正整数
            intNumber: [
                /^[1-9]\d*$/
                , '请输入正确的数字'
            ]
        });

        // 表单
        table.render({
            elem: '#lay-bankInfo-create-manage'
            , url: basePath + '/bankInfo/queryDataByCondition' //请求数据接口
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'bankName', title: '银行名称', align: 'center', width: 165}
                , {
                    field: 'instType', title: '机构类型', align: 'center', width: 145, templet: function (d) {
                        if (d.instType == "1") {
                            return "商业银行";
                        } else if (d.instType == "2") {
                            return "政策性银行";
                        } else if (d.instType == "3") {
                            return "当地主流银行";
                        } else {
                            return "";
                        }
                    }
                }
                , {field: 'openBankName', title: '开户行名称', align: 'center', width: 145}
                , {field: 'accountNo', title: '开户行账号', align: 'center', width: 165}
                , {
                    field: 'accountOwner', title: '帐户归属', align: 'center', width: 145, templet: function (d) {
                        if (d.accountOwner == "1") {
                            return "总部";
                        } else if (d.accountOwner == "2") {
                            return "区域";
                        } else if (d.accountOwner == "3") {
                            return "项目";
                        } else {
                            return "";
                        }
                    }
                }
                , {
                    field: 'accountType', title: '帐户类型', align: 'center', width: 145, templet: function (d) {
                        if (d.accountType == "1") {
                            return "贷款账号";
                        } else if (d.accountType == "2") {
                            return "监管账号";
                        } else if (d.accountType == "3") {
                            return "普通账号";
                        } else {
                            return "";
                        }
                    }
                }
                , {
                    field: 'accountStatus',
                    title: '帐户状态',
                    fixed: 'right',
                    align: 'center',
                    width: 145,
                    templet: function (d) {
                        if (d.accountStatus == "0") {
                            return "禁用";
                        } else if (d.accountStatus == "1") {
                            return "启用";
                        }
                    }
                }
                , {
                    title: '操作', align: 'center', fixed: 'right', width: 165, templet: function (d) {
                        var optStr = "";
                        <shiro:hasPermission name="ENORDISABLE_BANK_INFO">
                        if (d.accountStatus == "0") {
                            optStr += '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="enable"><i class="layui-icon layui-icon-pause"></i>启用</a>';
                        } else if (d.accountStatus == "1") {
                            optStr += '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="disable"><i class="layui-icon layui-icon-pause"></i>禁用</a>';
                        }
                        </shiro:hasPermission>
                        <shiro:hasPermission name="EDIT_BANK_INFO">
                        optStr += '<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-form"></i>编辑</a>';
                        </shiro:hasPermission>
                        return optStr;
                    }
                }
            ]]
            , page: true
            , limit: 10
        });

        <shiro:hasPermission name="FIA_BANK_INFO_LIST_QUERY">
        //监听搜索
        form.on('submit(lay-bankInfo-search)', function (data) {
            //执行重载
            table.reload('lay-bankInfo-create-manage', {
                page: {curr: 1},
                where: trimData(data)
            });
        });
        //重置清空
        form.on('submit(lay-user-back-reset)', function (data) {
            reset_form('query-form');
            //额外处理select
            $("#query-form-state").val('');
            form.render();
        });
        </shiro:hasPermission>

        // 监听操作列
        table.on('tool(lay-bankInfo-create-manage)', function (obj) {
            var data = obj.data;
            if (obj.event === 'enable') {
                layer.confirm('确定要启用？', {icon: 3, title: '提示'}, function (index) {
                        $.ajax({
                            type: "POST", //提交方式
                            url: basePath + '/bankInfo/enOrDisable',//路径
                            data: {
                                "id": data.id,
                                "accountStatus": "1"
                            },//数据，这里使用的是Json格式进行传输
                            success: function (result) {//返回数据根据结果进行相应的处理
                                if (result) {
                                    table.reload('lay-bankInfo-create-manage');  //数据刷新
                                    layer.close(index);
                                } else {
                                    layer.msg('数据通信异常~', {icon: 0});
                                }
                            }
                        });
                    }
                )
            } else if (obj.event === 'disable') {
                layer.confirm('确定要禁用？', {icon: 3, title: '提示'}, function (index) {
                        $.ajax({
                            type: "POST", //提交方式
                            url: basePath + '/bankInfo/enOrDisable',//路径
                            data: {
                                "id": data.id,
                                "accountStatus": "0"
                            },//数据，这里使用的是Json格式进行传输
                            success: function (result) {//返回数据根据结果进行相应的处理
                                if (result) {
                                    table.reload('lay-bankInfo-create-manage');  //数据刷新
                                    layer.close(index);
                                } else {
                                    layer.msg('数据通信异常~', {icon: 0});
                                }
                            }
                        });
                    }
                )
            } else if (obj.event === 'edit') {
                reset_form('saveOrEditForm');
                $('#id').val(data.id);
                form.val('saveOrEditForm', data);  //填充原值
                layer.open({
                    type: 1
                    , title: '编辑银行信息'
                    , content: $('#saveOrEditForm')
                    , area: layui.admin.screen() < 2 ? ['80%', '520px'] : ['720px', '520px']
                    , btn: ['保存', '取消']
                    , btnAlign: 'c'
                    , yes: function (index, layero) {
                        var submitID = 'saveOrEditFormSubmit'
                            , submit = layero.contents().find('#' + submitID);

                        //监听提交
                        form.on('submit(' + submitID + ')', function (data) {
                            var field = data.field; //获取提交的字段
                            //提交 Ajax 成功后，静态更新表格中的数据
                            $.ajax({
                                type: 'post',
                                url: basePath + '/bankInfo/saveOrEdit',
                                data: field,
                                success: function (result) {
                                    if (result.success) {
                                        table.reload('lay-bankInfo-create-manage'); //数据刷新
                                        reset_form("saveOrEditForm");//清空表单
                                        layer.close(index); //关闭弹层
                                    } else {
                                        layer.msg(result.msg, {icon: 7});
                                    }
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
            }
            ;
        });


        // 按钮事件
        var active = {
            add: function () {
                reset_form('saveOrEditForm');
                $('#id').val('');
                form.render();
                layer.open({
                    type: 1
                    , title: '新增银行信息'
                    , content: $('#saveOrEditForm')
                    , area: layui.admin.screen() < 2 ? ['80%', '520px'] : ['720px', '520px']
                    , btn: ['保存', '取消']
                    , btnAlign: 'c'
                    , yes: function (index, layero) {
                        var submitID = 'saveOrEditFormSubmit'
                            , submit = layero.contents().find('#' + submitID);

                        //监听提交
                        form.on('submit(' + submitID + ')', function (data) {
                            var field = data.field; //获取提交的字段
                            console.log(field)
                            console.log($('input[name="accountStatus"]:checked').val());
                            //提交 Ajax 成功后，静态更新表格中的数据
                            $.ajax({
                                type: 'post',
                                url: basePath + '/bankInfo/saveOrEdit',
                                data: field,
                                success: function (result) {
                                    if (result.success) {
                                        table.reload('lay-bankInfo-create-manage'); //数据刷新
                                        reset_form("saveOrEditForm");//清空表单
                                        layer.close(index); //关闭弹层
                                    } else {
                                        layer.msg(result.msg, {icon: 7});
                                    }
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
            }
        }
        // data-type事件
        $('.layui-btn.layuiadmin-btn-admin').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });

    //导出excel
    function exportList() {
        layer.msg("暂未上线，敬请期待~", {icon: 1});
    }

    //导入Excel
    function importList() {
        layer.msg("暂未上限，敬请期待~", {icon: 1});
    }
</script>
</body>
</html>

